<template>
  <div class="menufooter">
    <!-- 滚动字幕功能第一版不加 -->
    <!-- 滚动字幕内容————滚动字幕内容————滚动字幕内容————滚动字幕内容————滚动字幕内容———— -->
    <el-col :span="16"><span class="logo-img"></span></el-col>
    <el-col :span="8">
      <div class="bot">
        {{date}}&nbsp;{{time}}&nbsp;<font style="font-size:26px">{{week}}</font>
      </div>
    </el-col>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'menufooter',
  data () {
    return {
      date: '',
      time: '',
      week: ''
    }
  },
  computed: {
    ...mapState({
      timeOffset: state => state.timeOffset
    })
  },
  mounted: function () {
    let vm = this
    vm.pageReloadByTime()
    vm.getLocalTime()
  },
  methods: {
    getLocalTime () {
      let vm = this
      var nowLocalTime = Date.parse(new Date())
      var nowTime = new Date(nowLocalTime)
      var year = nowTime.getFullYear()
      var mounth =
        nowTime.getMonth() + 1 < 10
          ? '0' + (nowTime.getMonth() + 1)
          : nowTime.getMonth() + 1
      var date =
        nowTime.getDate() < 10 ? '0' + nowTime.getDate() : nowTime.getDate()
      vm.date = year + '-' + mounth + '-' + date
      var hour =
        nowTime.getHours() < 10 ? '0' + nowTime.getHours() : nowTime.getHours()
      var minute =
        nowTime.getMinutes() < 10
          ? '0' + nowTime.getMinutes()
          : nowTime.getMinutes()
      vm.time = hour + ':' + minute
      if (nowTime.getDay() === 0) {
        vm.week = '星期天'
      } else if (nowTime.getDay() === 1) {
        vm.week = '星期一'
      } else if (nowTime.getDay() === 2) {
        vm.week = '星期二'
      } else if (nowTime.getDay() === 3) {
        vm.week = '星期三'
      } else if (nowTime.getDay() === 4) {
        vm.week = '星期四'
      } else if (nowTime.getDay() === 5) {
        vm.week = '星期五'
      } else if (nowTime.getDay() === 6) {
        vm.week = '星期六'
      }
      vm.currentTimeInterval = setInterval(function () {
        var nowLocalTime = Date.parse(new Date())
        var nowTime = new Date(nowLocalTime)
        var year = nowTime.getFullYear()

        var mounth =
        nowTime.getMonth() + 1 < 10
          ? '0' + (nowTime.getMonth() + 1)
          : nowTime.getMonth() + 1
        var date =
        nowTime.getDate() < 10 ? '0' + nowTime.getDate() : nowTime.getDate()
        vm.date = year + '-' + mounth + '-' + date
        var hour =
        nowTime.getHours() < 10 ? '0' + nowTime.getHours() : nowTime.getHours()
        var minute =
        nowTime.getMinutes() < 10
          ? '0' + nowTime.getMinutes()
          : nowTime.getMinutes()
        vm.time = hour + ':' + minute
        if (nowTime.getDay() === 0) {
          vm.week = '星期天'
        } else if (nowTime.getDay() === 1) {
          vm.week = '星期一'
        } else if (nowTime.getDay() === 2) {
          vm.week = '星期二'
        } else if (nowTime.getDay() === 3) {
          vm.week = '星期三'
        } else if (nowTime.getDay() === 4) {
          vm.week = '星期四'
        } else if (nowTime.getDay() === 5) {
          vm.week = '星期五'
        } else if (nowTime.getDay() === 6) {
          vm.week = '星期六'
        }
      }, 1000)
    },
    /* 系统定时刷新23:59:59 */
    pageReloadByTime: function () {
      setInterval(function () {
        var Hours = new Date().getHours()
        var Minutes = new Date().getMinutes()
        var Seconds = new Date().getSeconds()
        /* 系统定时刷新23:59:59 */
        if (Hours === 23 && Minutes === 59 && Seconds === 59) {
          window.location.reload()
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import "../css/menufooter.scss";
</style>
